<template>
	<div class="from-box">
		<el-form ref="form" :model="form" label-width="120px">
			<div class="from-title"><span>基本资料</span></div>
			<el-row>
				<el-col :span="24">
					<el-form-item label="商户类型:">
						<el-radio v-model="form.merType" label="MERCHANT_03">企业</el-radio>
						<el-radio v-model="form.merType" label="MERCHANT_02">个体工商户</el-radio>
						<el-radio v-model="form.merType" label="MERCHANT_01">自然人</el-radio>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-form-item label="商户全称:">
						<el-input v-model="form.merFullName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户简称:">
						<el-input v-model="form.merName"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.merType != 'MERCHANT_01'">
				<el-col :span="8">
					<el-form-item label="营业执照号:">
						<el-input v-model="form.licId"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="执照起始日期:">
						<el-input v-model="form.businesslicenseStart"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="执照结束日期:">
						<el-input v-model="form.businesslicenseExpired"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="法人姓名:">
						<el-input v-model="form.legalName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="法人证件号:">
						<el-input v-model="form.legalCertNo"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="证件起始日期:">
						<el-input v-model="form.legalCertStartDate"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="证件结束日期:">
						<el-input v-model="form.legalCertEndDate"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="负责人手机号:">
						<el-input v-model="form.legalMobile"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系人姓名:">
						<el-input v-model="form.contactName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系人手机号:">
						<el-input v-model="form.contactMobile"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系人证件号:">
						<el-input v-model="form.contactIdNo"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="省份:">
						<el-select v-model="province" @change="fprovince" placeholder="请选择">
							<el-option v-for="item in provinceList" :key="item.AreaID" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="城市:">
						<el-select v-model="city" @change="fcity" placeholder="请选择">
							<el-option v-for="item in cityList" :key="item.AreaID" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="区县:">
						<el-select v-model="area" @change="farea" placeholder="请选择">
							<el-option v-for="item in areaList" :key="item.AreaID" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="地址:">
						<el-input v-model="form.addr"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营类目:">
						<el-input v-model="form.mcc"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.isLegalNameAcct == '2'">
				<el-col :span="12">
					<el-form-item label="被授权人姓名:">
						<el-input v-model="form.authName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="被授权人证件号:">
						<el-input v-model="form.authCertNo"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="from-title"><span>结算信息</span></div>
			<el-row>
				<el-col :span="8">
					<el-form-item label="结算方式:">
						<el-radio v-model="form.settleType" label="1">D1</el-radio>
						<el-radio v-model="form.settleType" label="2">T1</el-radio>
						<el-radio v-model="form.settleType" label="3">ND1(分账)</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结算账号类型:">
						<el-radio v-model="form.acctType" label="1">对公</el-radio>
						<el-radio v-model="form.acctType" label="2">对私</el-radio>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="法人同名账户:">
						<el-radio v-model="form.isLegalNameAcct" label="1">是</el-radio>
						<el-radio v-model="form.isLegalNameAcct" label="2">否</el-radio>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="8">
					<el-form-item label="开户名称:">
						<el-input v-model="form.acctName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结算账号:">
						<el-input v-model="form.account"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="支行联行号:">
						<el-input v-model="form.pbcBankId"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="开户银行名称:">
						<el-input v-model="form.bankName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="开户银行银行号:">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="银行预留手机号:">
						<el-input v-model="form.bankReserveMobile"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="8">
					<el-form-item label="开户支行名称:">
						<el-input v-model="form.bankCode"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="支行所在省份:">
						<el-select v-model="branchProvince" @change="fbprovince" placeholder="请选择">
							<el-option v-for="item in provinceList" :key="item.AreaID" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="支行所在市:">
						<el-select v-model="branchCity" @change="fbcity" placeholder="请选择">
							<el-option v-for="item in cityList" :key="item.AreaID" :label="item.name"
								:value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>


			<div class="fee" v-for="(item,index) in feeList">
				<div class="from-title">
					<!-- <span>{{nameList[item.name]}}->费率{{item.paymentPrdNo.substr(3)}}</span> -->
					<span
						v-if="['WX','ALI','UPAY'].includes(item.paymentPrdNo)">{{nameList[item.paymentPrdNo]}}->费率{{item.paymentPrdNo}}</span>
					<span v-else>{{nameList[item.paymentPrdNo.substr(3)]}}->费率{{item.paymentPrdNo.substr(3)}}</span>

					<div class="del-img" @click="del(index)"><img :src="delImg" alt=""></div>
				</div>
				<el-row>
					<el-col :span="24">
						<el-form-item label="费率模型:">
							<el-radio-group v-model="feeList[index].paymentPrdNo">
								<el-radio label="WX">微信一般类</el-radio>
								<el-radio label="ALI">支付宝一般类</el-radio>
								<el-radio label="UPAY">云闪付一般类</el-radio>
								<el-radio label="WX-ONLINE">微信线上互联网类</el-radio>
								<el-radio label="WX-REDU">微信公立医院、学校、宗教类</el-radio>
								<el-radio label="WX-DISCT">微信交通缴费类</el-radio>
								<el-radio label="WX-INSURE">微信保险、线上教育类</el-radio>
								<el-radio label="WX-REBATE">微信教育行业食堂类</el-radio>
								<el-radio label="WX-PREDU">微信私立中小幼类</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="费率模型:">
							<el-radio-group v-model="feeList[index].feeType" @change="feeType(index)">
								<el-radio label="01">单费率（百分比）</el-radio>
								<el-radio label="02">复合费率（云闪付）</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row v-if="feeList[index].feeType == '01'">
					<el-col :span="24">
						<el-form-item label="费率(百分比):">
							<el-input v-model="feeList[index].feeTemplate"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<div v-else-if="feeList[index].feeType == '02'">
					<div class="from-title"><span>复合费率：（1）银联手续费率第一档（2）银联手续费率第一档 备注：选择复合费率完成以后需点击确认</span></div>
					<el-row>
						<el-col :span="4">
							<el-form-item label="<1000元(1):">
								<el-input v-model="feeTemplate.feeRateDebitL1"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label=">=1000元(2):">
								<el-input v-model="feeTemplate.feeRateDebitL2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="借记封顶(1)(元):">
								<el-input v-model="feeTemplate.feeRateDebitCapL1"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="贷记卡(1):">
								<el-input v-model="feeTemplate.feeRateCreditL1"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="贷记卡(2):">
								<el-input v-model="feeTemplate.feeRateCreditL2"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item>
						<el-button @click="feesub(index)">确认</el-button>
					</el-form-item>
				</div>

			</div>


			<el-form-item>
				<el-button @click="feeAdd">增加</el-button>
			</el-form-item>

			<el-form-item class="butt">
				<el-button type="primary" @click="onSubmit">提交</el-button>
				<el-button @click="lastImg">上一步</el-button>
			</el-form-item>
		</el-form>
	</div>


</template>

<script>
	export default {
		props: {
			userID: Number
		},
		data() {
			return {
				form: {
					merType: 'MERCHANT_03', //商户类型 
					merName: '', //商户简称 
					merFullName: '', //商户全称 
					licId: '', //营业执照号 
					legalName: '', //负责人姓名 
					legalCertNo: '', //负责人证件号 码 
					legalMobile: '', //负责人手机号
					contactName: '', //联系人姓名
					contactMobile: '', //联系人手机号
					contactIdNo: '', //联系人证件号 码
					addr: '', //地址
					//手动填写
					province: '', //省份
					city: '', //城市
					area: '', //区县
					authName: '', //被授权人姓名
					authCertNo: '', //被授权人证件号码
					businesslicenseStart: '', //营业执照起始有效日期
					businesslicenseExpired: '', //营业执照截止日期
					legalCertStartDate: '', //证件起始有效期 yyyy-MM-dd
					legalCertEndDate: '', //证件截止有效期 yyyy-MM-dd
					mcc: '', //经营类目 
					//结算
					acctName: '', //开户名称
					account: '', //结算账号
					pbcBankId: '', //开户银行支行联行号
					bankName: '', //开户银行名称
					bankCode: '', //开户银行银行号
					branchName: '', //开户支行名称
					//费率
					// paymentPrdNo: 'WX', //支付产品号
					// feeType: '01', //费率类型
					// feeTemplate: '', //费率模板
					prdList: [],

					//手动填写
					branchProvince: '', //开户支行所在省份
					branchCity: '', //开户支行所在市
					bankReserveMobile: '', //银行预留手机号
					payLimit: '', //禁用支付类 型
					settleType: '1', //结算方式D1
					acctType: '1', //结算账号类型 对公
					isLegalNameAcct: '1', //是否法人同名账户 

				},
				provinceList: {},
				cityList: {},
				areaList: {},
				province: '',
				city: '',
				area: '',
				branchProvince: '',
				branchCity: '',
				feeTemplate: {
					feeRateDebitL1: '0',
					feeRateDebitL2: '0',
					feeRateDebitCapL1: '0',
					feeRateCreditL1: '0',
					feeRateCreditL2: '0',
				},
				//费率展示框
				delImg: require('../../../../../imgs/del.png'),
				nameList: {
					WX: '微信一般类',
					ALI: '支付宝一般类',
					UPAY: '云闪付一般类',
					ONLINE: '微信线上互联网类',
					REDU: '微信公立医院、学校、宗教类',
					DISCT: '微信交通缴费类',
					INSURE: '微信保险、线上教育类',
					REBATE: '微信教育行业食堂类',
					PREDU: '微信私立中小幼类',
				},
				feeList: [{
					paymentPrdNo: 'WX',
					feeType: '01',
					feeTemplate: '',
				}],
				prdList: [],

			};
		},
		methods: {
			//上一步
			lastImg(){
				this.$store.commit('activeType',1);
				this.$store.commit('imgType',true);
				this.$store.commit('infoType',false);
			},
			onSubmit() {
				this.form.prdList = this.feeList;
				console.log(this.form);
			},
			//费率列表删除	
			del(val) {
				this.$delete(this.feeList, val);

			},
			//新增费率列表
			feeAdd() {
				this.feeList.push({
					paymentPrdNo: 'WX',
					feeType: '01',
					feeTemplate: '',
				});
			},
			//复合费率
			feeType(val) {
				if (this.feeList[val].feeType == '02' &&
					this.feeList[val].paymentPrdNo != 'UPAY') {
					this.$message.error('只有云闪付才能选择复合费率！');
				}
			},
			//添加复合费率
			feesub(val) {
				console.log(this.feeTemplate)
				this.feeList[val].feeTemplate = JSON.stringify(this.feeTemplate);
				console.log(this.feeList);

			},
			getArea(id, type) {
				let that = this;
				this.$axios({
					url: '/admin/conf/getArea',
					data: {
						type: 4,
						parentID: id,
					},
					success(res) {
						if (res.data.code == 200) {
							if (type == 0) {
								that.provinceList = res.data.content;
							}
							if (type == 1) {
								that.cityList = res.data.content;
							}
							if (type == 2) {
								that.areaList = res.data.content;
							}
						}
					}
				})
			},
			fprovince(data) { //省份
				let obj = {}
				obj = this.provinceList.find(function(item) {
					return item.code === data
				})
				this.form.province = data;
				console.log(obj)
				//下一个
				this.getArea(obj.AreaID, 1);
			},
			fbprovince(data) { //省份
				let obj = {}
				obj = this.provinceList.find(function(item) {
					return item.code === data
				})
				this.form.branchProvince = data;
				//下一个
				this.getArea(obj.AreaID, 1);
			},
			fcity(data) {
				let obj = {}
				obj = this.cityList.find(function(item) {
					return item.code === data
				})
				this.form.city = data;
				//下一个
				this.getArea(obj.AreaID, 2);
			},
			fbcity(data) {
				let obj = {}
				this.form.branchCity = data;
			},
			farea(data) {
				this.form.area = data;
			}
		},
		created() {
			this.form.merName = this.$store.state.merchantInfo.nick_name;
			this.form.merFullName = this.$store.state.merchantInfo.user_name;
			this.form.licId = this.$store.state.merchantInfo.org_num;
			this.form.legalName = this.$store.state.merchantInfo.legal_person;
			this.form.legalCertNo = this.$store.state.merchantInfo.legal_person_id;
			this.form.legalMobile = this.$store.state.merchantInfo.link_phone;
			this.form.contactName = this.$store.state.merchantInfo.legal_person;
			this.form.contactMobile = this.$store.state.merchantInfo.link_phone;
			this.form.contactIdNo = this.$store.state.merchantInfo.legal_person_id;
			this.form.addr = this.$store.state.merchantInfo.address;
			this.form.acctName = this.$store.state.merchantInfo.account_name;
			this.form.account = this.$store.state.merchantInfo.account_no;
			this.form.pbcBankId = this.$store.state.merchantInfo.bank_code;
			this.form.bankName = this.$store.state.merchantInfo.bank_name;

			//得到区域编码
			this.getArea(0, 0);
		}
	}
</script>
<style scoped>
	.from-box {
		padding-top: 20px;
		padding-right: 30px;

	}

	.from-title {
		font-weight: bold;
		padding-bottom: 30px;
		padding-left: 20px;
		color: #888888;
	}

	.butt {
		margin-top: 50px;
		padding-bottom: 50px;
		text-align: center;
	}

	.fee {
		box-shadow: 10px 10px 5px #888888;
		border-top: 1px solid #888888;
		margin-bottom: 30px;
		padding: 10px;
	}

	.del-img {
		display: flex;
		justify-content: flex-end;

	}

	.del-img img {
		height: 15px;
		width: 15px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #888888;
	}
</style>
